<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }} <h3>{{bookName}}</h3></div>
    <div class="table-operator">
      <!-- 操作板块 -->
      <a-button
        type="primary"
        @click='goBack'
      >返回</a-button>
    </div>
    <s-table
      ref="table"
      rowKey="id"
      :loading="isLoading"
      :columns="columns"
      :data="loadData"
      :pageSize="15"
    >

      <span slot="url" slot-scope="text, item">
           <a-button
             class="fl-l"
             type="primary"
             icon="copy"
             @click='handleCopy(text)'
           >点击复制</a-button>
      </span>
      <span slot='used' slot-scope='text,item'>
        {{text}}/{{item.max}}
      </span>
      <span slot='qrcode' slot-scope='text,item'>
        <qrcodeImg :content='item.url'/>
      </span>

    </s-table>
    <makeInvite ref='form' @handleSubmit="handleRefresh" />
  </a-card>
</template>

<script>
import * as Api from '@/api/book/invite'
import { STable } from '@/components'
import makeInvite from '@/views/book/modules/makeInvite'
import qrcodeImg from '@/views/book/modules/qrcodeImg'
export default {
  name: 'Index',
  components: {
    STable,makeInvite,qrcodeImg

  },
  data () {
    return {
      // 查询参数
      queryParam: {},
      // 正在加载
      isLoading: false,
      batchId:0,
      bookName:'',
      // 表头
      columns: [

        {
          title: '邀请码Url',
          dataIndex: 'url',
          scopedSlots: { customRender: 'url' }
        },
        {
          title: '二维码',
          dataIndex: 'qrcode',
          scopedSlots: { customRender: 'qrcode' }
        },
        {
          title: '已绑定量',
          dataIndex: 'used',
          scopedSlots: { customRender: 'used' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({ ...param, ...this.queryParam })
          .then(response => response.data.list)
      },
    }
  },
  created () {
    this.batchId = this.$route.query.batchId
    this.bookName = this.$route.query.bookName
    this.queryParam.batchId= this.batchId
  },
  methods: {
    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh (bool = false) {
      this.$refs.table.refresh(bool)
    },
    handleCopy(text){
      window.getSelection().removeAllRanges();
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select();
      document.execCommand('copy');
      textarea.remove()
      this.$message.success('复制成功', 1.5)
    },
    goBack(){
      this.$router.go(-1)
    },
  }
}
</script>

<style lang="less" scoped>
.ant-card-body {
  padding: 22px 29px 25px;
}
</style>
